<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <style>

    </style>
</head>
<body>
<div id='app'>
    <p>请输入您的账号: <input type="text" v-model="username"></p>
    <p>请输入您的密码: <input type="password" v-model="password"></p>
    <p><button @click="loginUser()">登录</button></p>
    <p v-if="errorMessage" style="color: blue">{{ errorMessage }}</p>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            users: [],
            username: "",
            password: "",
            errorMessage:""
        },
        methods:{
            // 验证登录
            loginUser(){
                axios.post(`http://localhost:8080/login?username=${this.username}&password=${this.password}`)
                    .then(result => {
                        console.log(result.data)
                        if (result.data.code === 200){
                            window.location.href = "AxiosDemo.html";
                        } else {
                            this.errorMessage = "用户名或密码错误";
                        }
                    })
            }
        }
    })
</script>
</body>
</html>